<template>
  <div class="contact">
    <Header />
    
    <!-- 联系我们 -->
    <section class="contact-hero section">
      <div class="container">
        <h1 class="section-title">联系我们</h1>
        <p class="section-subtitle">我们期待与您的合作</p>
      </div>
    </section>

    <!-- 联系信息 -->
    <section class="contact-info section">
      <div class="container">
        <div class="info-grid">
          <div class="info-card">
            <div class="info-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" stroke="#007bff" stroke-width="2"/>
                <path d="M9 10a3 3 0 116 0 3 3 0 11-6 0" stroke="#007bff" stroke-width="2"/>
              </svg>
            </div>
            <h3>公司地址</h3>
            <p>北京市朝阳区科技园区创新大厦15层</p>
          </div>
          <div class="info-card">
            <div class="info-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 16.92a9 9 0 11-12.92-12.92" stroke="#007bff" stroke-width="2"/>
                <path d="M12 3v10l4 2" stroke="#007bff" stroke-width="2"/>
              </svg>
            </div>
            <h3>联系电话</h3>
            <p>客服热线: 40-123-4567</p>
            <p>商务合作: +86 138-013-8000</p>
          </div>
          <div class="info-card">
            <div class="info-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke="#007bff" stroke-width="2"/>
                <path d="M22 6l-10 7L2 6" stroke="#007bff" stroke-width="2"/>
              </svg>
            </div>
            <h3>电子邮箱</h3>
            <p>商务合作: biz@company.com</p>
            <p>技术支持: support@company.com</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系表单 -->
    <section class="contact-form section">
      <div class="container">
        <h2 class="section-title">在线留言</h2>
        <div class="form-container">
          <form @submit.prevent="submitForm">
            <div class="form-row">
              <div class="form-group">
                <label for="name">姓名 *</label>
                <input type="text" id="name" v-model="form.name" required>
              </div>
              <div class="form-group">
                <label for="email">邮箱 *</label>
                <input type="email" id="email" v-model="form.email" required>
              </div>
            </div>
            <div class="form-group">
              <label for="company">公司名称</label>
              <input type="text" id="company" v-model="form.company">
            </div>
            <div class="form-group">
              <label for="phone">联系电话</label>
              <input type="tel" id="phone" v-model="form.phone">
            </div>
            <div class="form-group">
              <label for="subject">主题 *</label>
              <select id="subject" v-model="form.subject" required>
                <option value="">请选择</option>
                <option value="product">产品咨询</option>
                <option value="demo">申请演示</option>
                <option value="support">技术支持</option>
                <option value="partnership">商务合作</option>
                <option value="other">其他</option>
              </select>
            </div>
            <div class="form-group">
              <label for="message">留言内容 *</label>
              <textarea id="message" rows="6" v-model="form.message" required></textarea>
            </div>
            <button type="submit" class="btn" :disabled="isSubmitting">
              {{ isSubmitting ? '提交中...' : '提交留言' }}
            </button>
          </form>
        </div>
      </div>
    </section>

    <!-- 地图 -->
    <section class="map section">
      <div class="container">
        <h2 class="section-title">公司位置</h2>
        <div class="map-container">
          <div class="placeholder-map">
            <svg width="800" height="400" viewBox="0 0 800 400" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="800" height="400" fill="#f0f0f0"/>
              <rect x="100" y="100" width="600" height="200" fill="#e0e0"/>
              <circle cx="400" cy="200" r="20" fill="#007bff"/>
              <text x="40" y="240" text-anchor="middle" fill="#333">公司位置</text>
            </svg>
          </div>
        </div>
      </div>
    </section>

    <Footer />
  </div>
</template>

<script>
import Header from './Header.vue'
import Footer from './Footer.vue'

export default {
  name: 'Contact',
  components: {
    Header,
    Footer
  },
  data() {
    return {
      form: {
        name: '',
        email: '',
        company: '',
        phone: '',
        subject: '',
        message: ''
      },
      isSubmitting: false
    }
  },
  methods: {
    submitForm() {
      this.isSubmitting = true
      
      // 模拟表单提交
      setTimeout(() => {
        console.log('表单提交:', this.form)
        alert('感谢您的留言！我们会尽快与您联系。')
        this.resetForm()
        this.isSubmitting = false
      }, 1000)
    },
    resetForm() {
      this.form = {
        name: '',
        email: '',
        company: '',
        phone: '',
        subject: '',
        message: ''
      }
    }
  }
}
</script>

<style scoped>
.contact-hero {
  padding: 120px 0 60px;
  margin-top: 80px;
  background-color: #f8f9fa;
  text-align: center;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.info-card {
  text-align: center;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.info-icon {
  margin-bottom: 20px;
}

.info-card h3 {
  margin-bottom: 15px;
  color: #333;
}

.info-card p {
  color: #666;
  margin-bottom: 5px;
}

.form-container {
  max-width: 600px;
  margin: 0 auto;
  background: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.map-container {
  text-align: center;
}

.placeholder-map {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .contact-hero {
    padding: 100px 0 40px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .form-container {
    padding: 20px;
  }
}
</style>
